<template>
	<view class="page">
		<cu-custom>
			<view class="cu-bar fixed"
				:style="{'height':customBarHeight + 'px','padding-top':statusBarHeight + 'px'}">
				<view class="margin-left-sm text-white" @tap="tapScan()">
					<view class="cuIcon-scan" style="font-size: 45rpx;"></view>
				</view>
				<view class="search-form round flex justify-center align-center">
					<input type="text" confirm-type="search" @confirm="searchDevice" :value="searchName"
						@input="searchNameInputChange" placeholder="搜索设备名称/编号"
						placeholder-style="color: #ff0000;text-align:center;"
						style="padding-right:0rpx;text-align:center;" />
				</view>
				<view v-if="searchName != null && searchName.lenght != 0" class="text-white">
					<button class="cu-btn bg-gradual-green round margin-right-xs" @tap="searchDevice()">搜索</button>
				</view>
			</view>
		</cu-custom>

		<view style="position:fixed;top:178rpx;z-index:10000;width:100%;">
			<view class="padding-lr-xl padding-tb" style="background-color: #f4f6ff;" @tap="goToManageDevice(index)">
				<view class="flex justify-between align-center">
					<view class="text-df  text-black text-bold">所有设备 ({{total}})</view>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getInsecticidalLampDeviceList" :top="'280rpx'" :bottom="'450rpx'" :safearea="true" offset="10"
			style="position:relative;z-index:1;width:100%;">
			<view v-for="(item,index) in deviceList" :key="index">
				<view v-for="(subItem,subIndex) in item" :key="subIndex">
					<view
						class="common-shadow margin-bottom margin-lr-xl padding flex justify-between align-center bg-white"
						style="border-radius:15rpx;" @tap="deviceInfo(subItem)">
						<view class="flex justify-start align-center">
							<img style="width:80rpx;height:auto" src="../../../../assets/images/device.png" alt="" mode="widthFix">
							<view class="padding-left">
								<view class="text-df text-black text-bold text-title">{{subItem.deviceName}}</view>
								<view class="text-xs text-gray-color margin-top-xs">{{subItem.code}}</view>
								<view class="text-xs text-gray-color address-input">{{subItem.address}}</view>
							</view>
						</view>
						<view class="text-center">
							<view class="flex justify-start align-center">
								<signal id="signal" :netSignal="subItem.signal" :inline="subItem.inline"></signal>
								<surplus id="surplus" :battery="subItem.battery" :inline="subItem.inline"
									class="surplus margin-left-sm"></surplus>
							</view>
							<view class="text-center margin-top-xs">
								<img v-if="subItem.inline === 1" style="width:50rpx;height:50rpx;"
									src="../../../../assets/images/onLineLamp.png" alt="" mode="widthFix">
								<img v-else style="width:50rpx;height:50rpx;"
									src="../../../../assets/images/offLamp.png" alt="" mode="widthFix">
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as storage from '@/util/storage'
	import myConfig from '@/myConfig'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import Surplus from '@/components/ztn-custom/Surplus2'
	import Signal from '@/components/ztn-custom/Signal'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name: 'DeviceList',
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Surplus,
			Signal
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			},
		},
		watch: {},
		props: {
			param: {
				type: [Number, String, Object],
				default () {
					return null;
				}
			},
		},
		data() {
			return {
				isLogin: false,
				downOption: {
					use: true,
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
					native: false
				},
				upOption: {
					use: true,
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					empty: {
						use: true,
						fixed: true,
						top: '25%'
					},
				},
				iconBaseUrl: myConfig.app.iconBaseUrl,
				imageSrc: '/static/images/noContent.png',
				searchName: null,
				deviceList: [],
				currentPage: 1,
				pageSize: 10,
				lastPage: -1,
				lastIndex: -1,
				total: -1,
				customBarHeight: storage.getCustomBarHeight(),
				statusBarHeight: storage.getStatusBarHeight(),
				tabbarHeight: storage.getTabbarHeight(),
			}
		},

		created() {},
		mounted() {
			this.searchName = this.param
			this.init()
		},
		methods: {
			init() {
				// this.getInfo()
				this.getInsecticidalLampDeviceList()
			},
			downCallback() {
				this.currentPage = 1
				this.deviceList = []
				this.mescroll.resetUpScroll()
			},
			getInsecticidalLampDeviceList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let name = this.searchName
				let params = {
					pageNum: currentPage,
					pageSize
				}
				if (name && name.length != 0) {
					params['name'] = name
				}
				ztIotApi.getInsecticidalLampDeviceList(params).then((res) => {
					const {
						code,
						msg,
						rows,
						total
					} = res
					const lastPage = Math.ceil(total / pageSize)
					const lastIndex = total % pageSize
					this.mescroll.endSuccess(rows.length, currentPage < lastPage)
					this.$set(this.deviceList, currentPage - 1, rows)
					this.lastPage = lastPage
					this.lastIndex = lastIndex
					this.total = total
					if (currentPage < lastPage) {
						this.currentPage = currentPage + 1
					}
				})
			},
			deviceInfo(item) {
				uni.navigateTo({
					url: `/pages/deviceInfo/deviceInfo?id=${item.id}&code=${item.code}`
				})
			},
			searchNameInputChange(e) {
				let searchName = e.detail.value.replace(/\s/g, '')
				this.searchName = searchName
			},
			searchDevice() {
				let searchName = this.searchName
				this.currentPage = 1
				this.deviceList = []
				this.mescroll.scrollTo(0, 300)
				this.mescroll.resetUpScroll()
			},
			goToDeviceList(param) {
				uni.$emit("navChange", "device", param)
			},
			tapScan() {
				uni.scanCode({
					success: (res) => {
						let result = res.result
						ztIotApi.bindingInsecticidalLampDevice({
							"bindingCode": result
						}).then((res) => {
							const {
								msg,
								data,
								success
							} = res
							if (success) {
								showToast("操作成功", 'none', 1000, false) //操作成功
								this.goToDeviceList()
							}
						})
					},
					fail: (res) => {
						showToast("操作失败", 'none', 1000, false) //操作失败
					}
				});
			},
			getInfo() {
				// loginApi.getInfo().then((res) => {
				// 	const {
				// 		code,
				// 		msg,
				// 		success
				// 	} = res
				// 	if (success) {
				// 		this.isLogin = true
				// 		let ancestorsParam = this.ancestorsParam
				// 		if(ancestorsParam){
				// 			let {treeName,ancestors} = ancestorsParam
				// 			this.treeName = treeName
				// 			this.ancestors = ancestors
				// 		}
				// 		this.getTreeselect()
				// 		this.getInsecticidalLampDeviceList()
				// 		setTimeout(() => {
				// 			uni.createSelectorQuery().in(this).select('#navScroll')
				// 				.boundingClientRect((e) => {
				// 					this.navScrollHeight = e.height
				// 				}).exec()
				// 		}, 0)
				// 		doNewWebSocket()
				// 	} else {
				// 		uni.redirectTo({
				// 			url: `/pages/login/login`
				// 		})
				// 	}
				// })
			},
		},
	}
</script>
<style lang="scss" scoped>
	.text-title {
		color: #3f3f44;
	}

	.text-red-color {
		color: #ff0000;
	}

	.text-blue-color {
		color: #335ed9;
	}

	.text-gray-color {
		color: #cdcdcd;
	}

	.page {
		background-color: #f4f6ff;
		min-height: 100vh;
	}

	.common-shadow {
		box-shadow: 0upx 0upx 10upx 4upx rgba(0, 0, 0, 0.04);
		border-radius: 8px;
		border: 0.05px solid;
		border-color: #efefef;
	}
</style>
